<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-08-26 14:32:05
 * @LastEditTime: 2021-08-20 09:56:09
 * @Description: 巡视移动作业主页
-->
<template>
	<article class="bg_4dbfae">
        <!-- 标题-->
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" />
			</template>
			<template slot="header_icon">
				<van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
				<van-popover class="popover" :offset="[0,8]"
				v-model="showPopover"
				theme="dark"
				trigger="click"
				:actions="actions"
				@select="onSelect"
				placement="bottom-end"
				>
					<template slot="reference">
						<van-image style="margin-left: 0.4rem;margin-right: 0.5rem;margin-top: 0.3rem;"  width="20" height="20"  :src="icon.iconAdd" />
					</template>
				</van-popover>
			</template>
		</Theader>
        <!-- 菜单-->
        <div class="menus">
            <van-grid :column-num="4" style="flex: 1;" :border="false">
				<van-grid-item v-for="(tab, index) in tabbar" v-show="showMenu(index)" :key="index" @click="goToPage(tab)">
				   <van-image style="margin-bottom: 15px;" :src="tab.active" width="40" height="40"/>
				   <span v-text="tab.name" style="font-size: 12px;"></span>
				</van-grid-item>
			</van-grid>
			<div class="menu-icon" @click="showMore = !showMore">
				<div>展开</div>
				<van-image class="menu-img" :src="icon.btmArrow" width="28" height="28"/>
			</div>
        </div>
        <!--内容-->
        <div class="content">
            <van-cell @click="showScreenPage" :border="false">
				<template slot="title">
                    <span class="line_green"></span>
                    <label class="title-label">我的工作</label>
				</template>
				<template slot="right-icon" @click="showScreen = true">
					<van-image @click="showScreen = true"  :src="icon.screen" width="24" height="24"/>
				</template>
            </van-cell>
            
            <div class="tabs">
				<van-tabs v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
					<van-tab class="tab-con" title="待处理(6)">
						<div class="tab-item" v-for="(item,index) in taskList" :key="index">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<!-- <span>待安排</span> -->
								<label>东善桥变全面巡视</label>
								<!-- <van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag> -->
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
								<div class="flex-center">
									<span style="color:#FB716D">即将到期</span>
									<van-icon style="margin-left: 5px;" size="18" name="question-o" />
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
							<div class="list-btn">
								<div class="reviceBtn" @click="takeOrders">接单</div>
								<div class="planBtn" @click="planArrangeBtn">计划安排</div>
							</div>
							<div v-if="false" style="text-align: center;margin-top: 20px;">
								<van-button style="width: 100%;"  type="primary" size="small">计划安排</van-button>
							</div>
						</div>
						<!--任务 待安排-->
						<div class="tab-item">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<span>「待安排」</span>
								<label>东善桥变全面巡视</label>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
							<div class="onePlanBtn" @click="planArrangeBtn">计划安排</div>
						</div>
						<!--任务 待准备-->
						<div class="tab-item" @click="beiginTask('TstartReady')">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<span>待准备</span>
								<label>东善桥变全面巡视</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--任务 待执行-->
						<div class="tab-item" @click="beiginTask('cardExecute')">
							<div class="tab-title">
								<span>待执行</span>
								<label>东善桥变全面巡视</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--设备维护 待执行(多设备)-->
						<div class="tab-item" @click="beiginTask('registOperPlanDevice')">
							<div class="tab-title">
								<span>待执行</span>
								<label>防小动物措施记录</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">过期</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--设备维护 待执行(单设备)-->
						<div class="tab-item" @click="beiginTask('registOperPlan')">
							<div class="tab-title">
								<span>待执行</span>
								<label>防小动物措施记录（单设备）</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">过期</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--缺陷 审核-->
						<div class="tab-item" @click="beiginTask('auditDefect')">
							<div class="tab-title">
								<span>缺陷审核</span>
								<label>防小动物措施记录</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">紧急</van-tag>
							</div>
							<div class="tab-sub flex-center">
								<div>
									<span>类型：</span>
									<label>缺陷</label>
								</div>
								<div style="margin-left: 2rem;">
									<span>发送人：</span>
									<label>王磊</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<span>任务接受时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
					</van-tab>
					<van-tab class="tab-con" title="已处理(15)">
						<div class="tab-item" @click="beiginTask('finishFileList')" v-for="(item,index) in taskList" :key="index">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<span>已完成</span>
								<label>东善桥变全面巡视</label>
								<!-- <van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag> -->
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
								<div class="flex-center">
									<span style="color:#FB716D">即将到期</span>
									<van-icon style="margin-left: 5px;" size="18" name="question-o" />
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--任务 待安排-->
						<div class="tab-item">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<span>待安排</span>
								<label>东善桥变全面巡视</label>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
							<div class="onePlanBtn">计划安排</div>
						</div>
						<!--任务 待准备-->
						<div class="tab-item">
							<div class="tab-icon">
								<div class="box3">熄灯巡视</div>
							</div>
							<div class="tab-title">
								<span>待准备</span>
								<label>东善桥变全面巡视</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
						<!--任务 待执行-->
						<div class="tab-item">
							<div class="tab-title">
								<span>待执行</span>
								<label>东善桥变全面巡视</label>
								<van-tag style="margin-left: 1rem;" size="medium" plain type="danger" color="#FB716D">标签</van-tag>
							</div>
							<div class="tab-sub">
								<span>交花园山变电站</span>
								<label>交流110kv</label>
							</div>
							<div class="tab-per tab-per-flex">
								<div class="flex-center">
									<van-icon size="18" name="user-circle-o" />
									<span style="margin-left: 5px;">巡视人：</span>
									<label>--</label>
								</div>
							</div>
							<div class="tab-time" style="display: flex;">
								<van-icon size="18" name="underway-o" />
								<span style="margin-left: 5px;">巡视计划时间：</span>
								<label>2020/06/09 09:21</label>
							</div>
						</div>
					</van-tab>
				  </van-tabs>
            </div>
		</div>
		<!--筛选框-->
		<van-popup
		@close="showScreen=false"
		v-model="showScreen"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<screen></screen>
		</van-popup>
		<!--操作框-->
		<van-popup
		@close="showScan=false"
		v-model="showScan"
		closeable
		close-icon-position="top-right"
		:style="{ width: '80%'}"
		>
			<operBtn></operBtn>
		</van-popup>

		<Tabbar></Tabbar>
	</article>
</template>

<script type="text/javascript">
	import Theader from "./component/header"
	import Tabbar from '@/components/tabbar'
	import operBtn from "./component/operBtn.vue"
	import screen from "./component/screen.vue"
	export default {
		name: 'tourIndex',
		components: {
			Theader,
			Tabbar,
			screen,
			operBtn
		},
		data() {
			return {
				active: 0,
				title: "变电运维应用",
				showMore: false,//是否显示更多按钮
				showScreen: false,//显示筛选框
				showScan:false,//显示操作弹框
				icon: {
					rfid:require('../../../assets/tour/icon-rfid.png'),
					iconAdd:require('../../../assets/tour/icon-add.png'),
					scan:require('../../../assets/tour/scan.png'),
					btmArrow:require('../../../assets/tour/bottom-arrow.png'),
					screen:require('../../../assets/tour/icon-screen.png'),
                },
                tabbar: [
                    {
						name: '运维计划',
						path: 'operPlanList',
						pathName: 'operPlanList',
						icon: 'compass-full',
						active: require('../../../assets/tour/icon-mt-plan.png'),
					},
					{
						name: '运行值班',
						path: 'dutyHome',
						pathName: 'dutyHome',
						active: require('../../../assets/tour/icon-mt-duty.png'),
					},
					{
						name: '周期巡视',
						path: '/cycleToueList',
						pathName: 'cycleToueList',
						active: require('../../../assets/tour/icon-mt-cycle.png'),
					},
					{
						name: '特殊巡视',
						path: 'TcycleToueList',
						pathName: 'TcycleToueList',
						active: require('../../../assets/tour/icon-mt-special-tour.png'),
					},
					{
						name: '操作票',
						path: 'ticketList',
						pathName: 'ticketList',
						active: require('../../../assets/tour/icon-mt-operation.png'),
                    },
                    {
						name: '设备跳闸',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-trip.png'),
                    },
                    {
						name: '设备维护',
						path: '/operPlanList',
						pathName: 'operPlanList',
						active: require('../../../assets/tour/icon-mt-device.png'),
                    },
                    {
						name: '缺陷管理',
						path: 'newDefectList',
						pathName: 'newDefectList',
						active: require('../../../assets/tour/icon-mt-defect.png'),
                    },
                    {
						name: '数据抄录',
						path: 'HiddenDangerList',
						pathName: 'personal',
						active: require('../../../assets/tour/icon-mt-copydata.png'),
					},
					{
						name: '信息查询',
						path: 'queryInfoMenu',
						pathName: 'queryInfoMenu',
						active: require('../../../assets/tour/icon-mt-copydata.png'),
					}
				],
				workName: "",
				taskList:[
					{},
				],
				showPopover: false,
				actions: [
					{ text: '扫一扫', icon: require('../../../assets/tour/white-scan.png') },
					{ text: '临时缺陷', icon: require('../../../assets/tour/white-defect.png') },
					{ text: '临时隐患', icon: require('../../../assets/tour/white-hidden.png') },
				],
				
			}
		},
		
		computed: {
			//展开显示更多菜单、正常显示4个菜单
			showMenu() {
				return function(index) {
					if(!this.showMore) {
						if(index > 3) {
							return false;
						}else{
							return true;
						}
					}else{
						return true;
					}
				}
			}
		},
		
		methods: {
            /**
            * @description: rifid
            * @param {*}
            * @return {*}
            */         
			rfidBtn() {
				
            },
            /**
             * @description: 扫一扫
             * @param {*}
             * @return {*}
             */
            scanBtn() {

			},
			showScreenPage() {

			},
			/**
			* @description: 菜单跳转
			* @param {*}
			* @return {*}
			*/
			goToPage(tab) {
				console.log(this.$router);
				this.$router.push({
					name: tab.pathName
				})
			},
			/**
			* @description: 班组长==计划安排
			* @param {*}
			* @return {*}
			*/
			planArrangeBtn(tab) {
				this.$router.push({
					name: "scheduling",
					query:{
						params:{
							state:"0"
						}
					}
				})
			},
			/**
			* @description: 班组长==接单
			* @param {*}
			* @return {*}
			*/
			takeOrders() {
				this.$router.push({
					name: "scheduling",
					query:{
						
					}
				})
			},
			/**
			* @description: 待准备
			* @param {*}
			* @return {*}
			*/
			beiginTask(value) {
				// var name = "";
				// switch(value) {
				// 	case "defect":
				// 		name = "auditDefect"
				// 		break;
				// 	case "startReady":
				// 		name:"TstartReady"
				// 		break;
				// 	default:
				// 		name="";
				// }
				if(!value){
					return;
				}
				this.$router.push({
					name: value,
					query:{
						
					}
				})
			},
			/**
			* @description: 顶部弹框
			* @param {*}
			* @return {*}
			*/
			onSelect(action) {
				if(action.text == '扫一扫'){
					this.showScan = true;
				}
				if(action.text == '临时缺陷'){
					this.$router.push({
						name:"newDefectList"
					})
				}
				if(action.text == '临时隐患'){
					this.$router.push({
						name:"dangerList"
					})
				}
			}
		},
		
		watch: {
			
		},
		mounted() {
			
		},
		created() {

		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 !important;
	}

	.popover /deep/ .van-popover__arrow {
		right: 8px;
	}
	.menus{
		background: #fff;
		margin-top: 45px;
		padding-left: 15px;
    	padding-right: 15px;
		display: flex;
	}
	.menu-icon{
		width: 1rem;
    	font-size: 13px;
		text-align:center;
		margin-top: 0.9rem;
	}
	.menu-img{
		position: relative;
    	left: -5px;
	}
	.content{
		height: calc(100% - 21rem);
	}
	.content .title-label{
		font-size: 17px;
		color: #333333;
		font-weight: medium;
	}
	.tabs{
		height: 100%;
	}
	.tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-sub{
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
	
	.flex-center{
		display: flex;
		align-items: center;
	}
	.tab-con{
		padding-left: 0.7rem;
    	padding-right: 0.7rem;
	}
	.tab-con .tab-item{
		background: #fff;
   		border-radius: 0.7rem;
		padding: 1rem;
		margin-bottom: 0.7rem;
		position: relative;
		overflow: hidden;
	}
	.tab-con .tab-item .tab-content{
		font-size: 13px;
		color: #999;
		padding: 5px 0px;
	}
	/deep/ .van-grid-item__content{
		padding: 8px;
	}
	/deep/ .van-tabs{
		height: 100%;
	}
	/deep/ .van-tabs__content{
		overflow: auto;
		padding-top: 0.8rem;
    	height: calc(100% - -2.5rem);
	}
	.box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: rgb(220, 244, 240);
		color: rgb(14, 178, 149);
		font-weight: bold;
	}
	.box4{
		transform: rotate(180deg);
		position: absolute;
    	left: 30%;
		top: -1px;
		border-top: 0px solid rgba(0,0,0,0);
		border-right: 14px solid rgba(0,0,0,0);
		border-bottom: 32px solid #07C160;
		border-left: 14px solid rgba(0,0,0,0);
	}
	.box5{
		transform: translate(15px, 0px);
		border-top: 0px solid rgba(0, 0, 0, 0);
		border-right: 14px solid rgba(0, 0, 0, 0);
		border-bottom: 32px solid #07C160;
		border-left: 14px solid rgba(0, 0, 0, 0);
	}
	.tab-icon{
		display: flex;
		position: absolute;
		right: -5%;
		top: 8%;
		transform: rotate(46deg);
	}
	/deep/ .van-search{
        padding: 0px;
        height: 30px;
    }
	.list-btn{
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
	}
	.reviceBtn{
		width: 40%;
		height: 3rem;
		color:#38BFA9;
		background: url("../../../assets/tour/bg-left-btn.png");
        background-size: 100% 100%;
		line-height: 3rem;
    	font-size: 1rem;
		text-align: center;
		border-radius: 0.7rem;
	}
	.planBtn{
		width: 60%;
		height: 3rem;
		text-align: center;
		color:white;
		border-radius: 0.7rem;
		line-height: 3rem;
    	font-size: 1rem;
		background: url("../../../assets/tour/bg-right-btn.png");
		background-size: 100% 100%;
	}
	.onePlanBtn{
		height: 3rem;
		text-align: center;
		color:white;
		border-radius: 0.7rem;
		line-height: 3rem;
    	font-size: 1rem;
		background: url("../../../assets/tour/bg-one-btn.png");
		background-size: 100% 100%;
	}
</style>
